<script setup lang="tsx">
defineOptions({
  name: "isolateList"
});
import { ref, reactive, markRaw, onMounted } from "vue";
import { PxRadioGroup, PxMessage, PxInput } from "px-ui";
import { Edit, Delete } from "@px-ui/icons-vue";
import commonTable from "@/views/common/components/commonTable/index.vue";
import selectDetector from "./selectDetector.vue";
import { useMessageBox } from "@/hooks/useCommon";

const isolateRef = ref<HTMLElement | null>(null);
const isolateListRef = ref<InstanceType<typeof commonTable> | null>(null);
const selectDetectorVisible = ref<boolean>(false);
const detectorList = defineModel({ type: Array, default: () => [] });
const detectorChecklistDTOList = ref<Array<Record<string, any>>>([]);

const tableCloumns: Array<CommonTable.TableCloumnsType> = [
  {
    label: "侦测器",
    prop: "detectorCode",
    width: 200
  },
  {
    label: "气体类型",
    prop: "gasName",
    width: 200
  },
  {
    label: "位置",
    prop: "location",
    width: 200
  },
  {
    label: "备注",
    prop: "remark",
    width: 300,
    render({ row }: any) {
      const inputChangeHandler = (value?: string) => {
        emits("change", detectorList.value);
      };
      return () => (
        <PxInput style={{ height: "23px", verticalAlign: "top" }} v-model={row.remark} onChange={inputChangeHandler} placeholder="请输入备注" />
      );
    }
  }
];

const operationOptions: Array<CommonTable.operationOptionItemType> = [
  {
    content: "删除",
    auth: "GAS_OPERATION_DETECTORMANAGE_ISOLATE_CHECK_BTN",
    icon: markRaw(Delete),
    type: "danger",
    click: (scope: any) => del(scope)
  }
];

const emits = defineEmits(["change"]);

const selectionChangeHandler = (val: Array<any>) => {
  const newArr = val
    .map(item => {
      const { detectorCode = "", gasName = "", detectorPositionName: location = "", remark = "" } = item;
      return { detectorCode, gasName, location, remark };
    })
    .filter(({ detectorCode }) => !detectorList.value.some(ite => ite.detectorCode === detectorCode));
  detectorList.value = [...detectorList.value, ...newArr];
  emits("change", detectorList.value);
};

const del = (scope: any) => {
  const {
    row: { detectorCode = "" }
  } = scope;
  const msg = `确定删除侦测器 ${detectorCode} 吗？`;
  useMessageBox("delete", msg, async () => {
    detectorList.value = detectorList.value.filter(item => item.detectorCode !== detectorCode);
    detectorChecklistDTOList.value = detectorChecklistDTOList.value.filter(item => item.detectorCode !== detectorCode);
    PxMessage.success("删除成功！");
  });
};

const validate = (): Promise<Array<any>> => {
  return new Promise((resolve, reject) => {
    if (detectorList.value.length) {
      resolve(markRaw(detectorList.value));
    } else {
      isolateRef.value.scrollIntoView({ behavior: "smooth" });
      PxMessage.error("请选择侦测器!");
      reject(false);
      throw new Error("请选择侦测器");
    }
  });
};

defineExpose({
  validate
});
</script>

<template>
  <div ref="isolateRef" class="isolate-list">
    <px-button type="primary" plain @click="selectDetectorVisible = true">选择侦测器</px-button>
    <commonTable
      ref="isolateListRef"
      v-model="detectorList"
      :pagination="false"
      :tableCloumns="tableCloumns"
      :operationOptions="operationOptions"
      :max-height="300"
    />
    <selectDetector
      v-if="selectDetectorVisible"
      v-model:visible="selectDetectorVisible"
      v-model="detectorChecklistDTOList"
      @submit="selectionChangeHandler"
    />
  </div>
</template>

<style lang="scss" scoped>
.isolate-list {
  box-sizing: border-box;
  padding: 16px;

  .px-button {
    margin-bottom: 16px;
  }
}
</style>
